<template>
  <div class="mainControl">
    <VonCrumbs title="产品维护"></VonCrumbs>
    <div class="widget">
      <VonInput v-model="searchCondition" width="260px" placeholder="搜索产品" @change="getProducts">
      </VonInput>
      <el-button type="primary" size="small" @click="add" class="addButton">
        添加
      </el-button>
    </div>
    <div class="tableContent">
      <VonTable :column="column" :tableData="tableData">
        <template slot="num">
          <el-table-column label="序号" align="center" width="100px">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
        </template>
        <template slot="operation">
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="select(scope.row)" style="color: #1890ff">
                配置
              </el-button>
              <el-button type="text" size="small" @click="edit(scope.row)" style="color: #1890ff">
                编辑
              </el-button>
              <!-- <el-button type="text" size="small" style="color: #1890ff" @click="del(scope.row)">
                删除
              </el-button> -->
            </template>
          </el-table-column>
        </template>
      </VonTable>
    </div>
    <VonDialog :title="type==1?'新增':'编辑'" @cancelResult="cancelResult" @commitResult='commitResult' :isShow_Popup="isShow_Popup">
      <div class="deviceForm" slot="content">
        <el-form ref="form" :model="form" label-width="48px">
          <el-form-item>
            <VonInput v-model="form.name" :readonly="type==3" label="产品名称" width="460px"></VonInput>
          </el-form-item>
          <el-form-item v-if="type!=3">
            <VonSelect v-model="recipeIds" :options="options" :isMultiple="true" label="选择配方(多选)" width="460px"></VonSelect>
          </el-form-item>
          <el-form-item v-else>
            <VonSelect v-model="recipeIds" :options="options" label="选择配方" width="460px"></VonSelect>
          </el-form-item>
          <el-form-item v-if="type!=3">
            <VonInput v-model="form.clientProductNo" label="客户端产品料号" width="460px"></VonInput>
          </el-form-item>
          <el-form-item v-if="type!=3">
            <VonInput v-model="form.supplyCode" label="供应商代码" width="460px"></VonInput>
          </el-form-item>
          <el-form-item v-if="type!=3">
            <VonSelect v-model="form.reworkCode" :options="reworkCodes" label="选择返工码" width="460px"></VonSelect>
          </el-form-item>
        </el-form>
      </div>
    </VonDialog>
  </div>
</template>

<script>
import {
  getProductListApi,
  createProduct,
  deleteProduct,
  getRecipeOptions,
  productUpdate,
  selectRecipe
} from "../../api/workStation/mainControl";
import { openLoading, closeLoading } from "../../common/prompt";

export default {
  name: "ProductManage",
  data() {
    return {
      searchCondition: "",
      tableData: [],
      type: 0,
      form: {},
      isShow_Popup: false,
      column: [
        {
          align: "center",
          label: "产品名称",
          prop: "name"
        },
        {
          align: "center",
          label: "配方",
          prop: "recipesName"
        }
      ],
      options: [],
      recipeIds: [],
      reworkCodes:[
        { id:0,name:"0"},
        { id:1,name:"1"},
        { id:2,name:"2"}
      ]
    };
  },
  created() {
    this.getProducts();
    this.getOptions();
  },
  methods: {
    getOptions() {
      getRecipeOptions().then(res => {
        this.options = res.data;
      });
    },
    getProducts() {
      openLoading();
      let query = {};
      if (this.searchCondition) {
        query = { name: this.searchCondition };
      }
      getProductListApi(query).then(res => {
        closeLoading();
        if (res.data && res.status == 200) {
          this.tableData = res.data;
          this.tableData.forEach(t => {
            let names = [];
            t.recipes.forEach(r => {
              names.push(r.recipeName);
            });
            t.recipesName = names.join();
          });
        } else {
          this.$message.error("查询数据失败");
        }
      });
    },
    commitResult() {
      if (!this.form.name) {
        this.$message.error("请填写产品");
        return;
      }
      if (!this.recipeIds) {
        this.$message.error("请选择配方");
        return;
      }
      this.form.recipeIds = this.recipeIds;
      openLoading("处理中...");
      if (this.type == 1) {
        createProduct(this.form).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("新增成功");
            this.getProducts();
          } else {
            this.$message.error("添加失败");
          }
        });
      } else if (this.type == 2) {
        productUpdate(this.form).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("修改成功");
            this.getProducts();
          } else {
            this.$message.error("添加失败");
          }
        });
      } else {
        if (!this.recipeIds) {
          this.$message.error("请选择配方");
          return;
        }
        const data = {
          productId: this.form.id,
          recipeId: this.recipeIds
        };
        selectRecipe(data).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("配置成功");
            this.getProducts();
          } else {
            this.$message.error("添加失败");
          }
        });
      }
    },
    cancelResult() {
      this.isShow_Popup = false;
    },
    add() {
      this.form = {};
      this.recipeIds = [];
      this.type = 1;
      this.isShow_Popup = true;
    },
    edit(row) {
      this.type = 2;
      this.isShow_Popup = true;
      this.form = { ...row };
      this.form.recipeIds = [];
      this.recipeIds = [];
      this.form.recipes.forEach(r => this.recipeIds.push(r.recipeId));
    },
    select(row) {
      this.type = 3;
      this.isShow_Popup = true;
      this.form = { ...row };
    },
    del(row) {
      this.$confirm("是否确认操作？").then(() => {
        let data = { id: row.id };
        deleteProduct(data).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("删除成功");
            this.getMaterials();
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../style/mainControl";
</style>
